<template>
  <div>
    <el-table :data="users" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="#ID"></el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-avatar shape="square" size="medium" :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phoneNum" label="手机"></el-table-column>
      <el-table-column prop="type" label="用户类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==0">管理员</el-tag>
          <el-tag v-if="scope.row.type==1" type="success">医护人员</el-tag>
          <el-tag v-if="scope.row.type==2" type="warning">学生</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="'编辑'" placement="top">
            <el-button type="primary" icon="el-icon-edit"
                       size="small" @click="updateUser(scope.row)" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" :content="'删除'" placement="top">
            <el-button type="danger" icon="el-icon-delete" size="small"
                       @click="deleteUser(scope.row.id)" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" :content="'分配角色'" placement="top">
            <el-button type="warning" icon="el-icon-unlock" size="small"
                       @click="assign(scope.row.id)" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    updateUser(user) {
      this.$emit('update', user)
    },
    deleteUser(id) {
      this.$emit('del', id)
    },
    assign(id) {
      this.$emit('assign', id)
    }
  },
  props: {
    users: {
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>

</style>
